<template>
  <div>
    <div class="crumbs">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-lx-warn"></i> 权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <el-card shadow="hover">
      <div class="card-header">
        <el-select v-model="permissionForm.rid" clearable placeholder="请选择身份" size="large">
          <el-option
            v-for="item in roleOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button type="primary" icon="el-icon-plus" @click="handleAddRole">添加角色</el-button>
      </div>
      
      <el-tree :data="menuList" style="margin-top: 20px;"
        show-checkbox ref="treeRef"
        node-key="id"
        :default-checked-keys="defaultCheckedOptions"
        :props="defaultProps"
      />
      <el-button type="danger" @click="getCheckedKeys" icon="el-icon-refresh">修改</el-button>
    </el-card>
    

    <el-dialog v-model="dialogVisible" title="添加角色" center>
      <el-card shadow="hover">
        <el-form :model="roleForm" :rules="roleRules" label-width="120px" status-icon>
          <el-form-item label="角色英文名称" prop="name">
            <el-input v-model="roleForm.name" placeholder="请输入角色英文名称" clearable />
          </el-form-item>
          <el-form-item label="角色中文名称" prop="nameZh">
            <el-input v-model="roleForm.nameZh" placeholder="请输入角色中文名称" clearable/>
          </el-form-item>    
        </el-form>
      </el-card>
      <template #footer class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = !dialogVisible">取 消</el-button>
        <el-button type="danger" @click="addRole">确 定</el-button>
      </template>
    </el-dialog>
    
  </div>
</template>

<script>
import { map } from 'lodash';
import { onMounted, reactive, ref, watch,  } from 'vue';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
export default {
  name: 'menuManage',
  setup() {
    const store = useStore();
    const menuList = reactive([]);
    const defaultProps = {
      children: 'children',
      label: 'name',
    }

    const defaultCheckedOptions = reactive([]);
    const treeRef = ref(false);
    const getCheckedKeys = () => {
      const checkedKeys = treeRef.value.getCheckedKeys();
      for(let i=0;i<checkedKeys.length;i++){
          switch(checkedKeys[i]){
            case 2:
            case 3:
            case 4:
            case 5:
            case 15:
            case 16:
                checkedKeys.splice(i,1);
                break;
            default:
                break;
          }
        }
      // console.log("@@@",checkedKeys);
      store.dispatch("UpdateMenuRole",{
        rid:permissionForm.rid,
        mids:checkedKeys
      }).then(res=>{
        console.log("UpdateMenuRole is ",res);
        ElMessage({
          message: '修改成功',
          type: 'success',
          center:true,
        });
        getRoleMenu();
      })
    }


    const permissionForm = reactive({
      rid:'',
      mids:[],
    });

    const roleOptions = reactive([])
    const dialogVisible = ref(false);
    const roleForm = reactive({
      nameZh:'',
      name:'',
    });
    const roleRules = {
      nameZh: [
        { required: true, message: '请输入角色中文名称', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
      ],
      name: [
        { required: true, message: '请输入角色英文名称', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
        { pattern: /^[a-zA-Z]+$/, message: '只能输入英文字母', trigger: 'blur' },
      ],
    };
    const handleAddRole = ()=>{
      dialogVisible.value = true;
    }
    const addRole = ()=>{
      dialogVisible.value = true;
      store.dispatch("AddRole",{
        nameZh:roleForm.nameZh,
        name:"ROLE_"+roleForm.name,
      })
      .then(res=>{
        if(res.code == 200){
          getRoleList();
          ElMessage({
            type: 'success',
            message: '添加成功',
            center:true,          
          })
          dialogVisible.value = false;
        }else{
          ElMessage({
            type: 'error',
            message: res.message,
            center:true,          
          })
        }
      }).catch(err=>{
        console.log("添加角色异常 ",err);
      })
    }


    const handleSelectionChange = (val) => {
      console.log("val",val);
      permissionForm.mids = val;
      console.log("permissionForm.mids",permissionForm.mids);
    }
    
  const getRoleMenu = ()=>{
      store.dispatch("GetRoleMenu",permissionForm.rid)
      .then(res=>{
        defaultCheckedOptions.splice(0,defaultCheckedOptions.length,...res);
        // console.log("defaultCheckedOptions is ",defaultCheckedOptions);
        treeRef.value.setCheckedKeys(defaultCheckedOptions);
      })
  }

   watch(()=>permissionForm.rid,(newValue,oldValue)=>{
     getRoleMenu();
   })

    const getRoleList = ()=>{
      store.dispatch("GetAllRole").then(res=>{
        roleOptions.splice(0,roleOptions.length,...map(res,(item)=>{
          return {
            label:item.nameZh,
            value:item.id
          }
        }));
        // console.log("##",roleOptions)
      })
    }
    const getMenuList = ()=>{
      store.dispatch("GetMenu").then(res=>{
        menuList.splice(0,menuList.length,...map(res[0].children,item=>{
            return {
              id:item.id,
              name:item.name,
              children:map(item.children,(item)=>{
                return {
                  id:item.id,
                  name:item.name,
                }
              })
            }
        }));
        // console.log("@@menuList",menuList);
      })

    }
    onMounted(()=>{
      getRoleList();
      getMenuList();
            
    })


    return {
      roleOptions,
      handleAddRole,
      addRole,
      roleForm,
      roleRules,
      defaultCheckedOptions,
      treeRef,
      getCheckedKeys,
      menuList,
      dialogVisible,
      permissionForm,
      defaultProps,
      handleSelectionChange,
    }
  },
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
